import {View, Text, StyleSheet, Button, TextInput, TouchableOpacity} from 'react-native'
import React, {Component} from 'react'
import showPicker from "../../component/common/PickerProxy";
import InputCell, {InputCellProps} from "../../component/widget/InputCell";
import {HUNDRED_PERCENT, default as styles} from "../../style/index";
import toast from "../../component/common/ToastProxy";
import {Actions} from "react-native-router-flux";
import {inject, observer} from "mobx-react/custom";
import {Store} from "../../store";
import {ShippingAddressInterface} from "../../net/instance/CommenModelInstance";
import {afterAnimation, defaultObj} from "../../util";
import * as  _ from "lodash"
import {number} from "prop-types";

const cityData = require("../../assets/json/city");


interface AddressSettingProps extends Store {
}

interface AddressSettingState extends ShippingAddressInterface {

}

@inject("address")
@observer
export default class AddressSetting extends Component<AddressSettingProps, AddressSettingState> {
    state: AddressSettingState = defaultObj;
    defaultForm:AddressSettingState = defaultObj;
    constructor(props: AddressSettingProps) {
        super(props);
       this.defaultForm =  this.state = _.cloneDeep(this.props.address.userAddress)
    }

    async componentDidMount() {

        // showPicker(cityData);
    }

    updateOrInsertAddress = async () => {
        await this.props.address.insertOrUpdateShippingAddress(this.state);
        global.showSuccess("更新成功", 300, () => {
            afterAnimation(async () => {
                Actions.pop();
            });
        });
    }

    updateAddressState(key: string) {
        return (text: string) => {
            const state: any = {
                [key]: text
            };
            this.setState(state);
        }
    };

    render() {
        const {addressDetail,phone,name} = this.defaultForm;
        const cellList: InputCellProps[] = [
            {
                label: {text: "收货人"},
                input: {
                    placeholder: "请输入收货人",
                    defaultValue: name,
                    clearButtonMode:"while-editing",
                    onChangeText: this.updateAddressState("name"),
                }
            },
            {
                label: {text: "手机号码"},
                input: {
                    placeholder: "请输入手机号",
                    defaultValue: phone,
                    clearButtonMode:"while-editing",
                    onChangeText: this.updateAddressState("phone"),
                    keyboardType: "phone-pad"
                }
            },
        ];
        return (<View style={style.container}>
            <View style={{marginTop: 8}}>
                {cellList.map(({label, input}, index) => {
                    return (<InputCell key={index} input={input} label={label}/>)
                })}
                <InputCell style={{height: 80, paddingVertical: 10}} input={{
                    placeholder: "请输入详细地址，如门牌号",
                    numberOfLines: 3,
                    style: {
                        height: HUNDRED_PERCENT
                    },
                    multiline: true,
                    onChangeText: this.updateAddressState("addressDetail"),
                    defaultValue: addressDetail
                }} label={{
                    text: "收货地址"
                }}/>
            </View>
            <TouchableOpacity style={[{
                marginHorizontal: 14,
                height: 44,
                borderRadius: 30,
                backgroundColor: "#629C36",
                marginTop: 30
            }, styles.centered]} onPress={this.updateOrInsertAddress}>
                <Text style={{fontSize: 14, color: "#fff"}}>确定</Text>
            </TouchableOpacity>
        </View>)
    }
}

const style = StyleSheet.create({
    container: {}
});

 